<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="timeBetween">
              <el-date-picker
                :placeholder="$t('时间选择')"
                :start-placeholder="$t('开始时间')"
                :end-placeholder="$t('结束时间')"
                @change="getList"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                v-model="queryParams.time"
                type="datetimerange"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-select
                filterable
                clearable
                @change="getList"
                v-model="queryParams.type"
                :placeholder="$t('租户类型')"
              >
                <!-- type:1-卖家 2-供应商 -->
                <el-option :label="$t('卖家')" :value="1" />
                <el-option :label="$t('供应商')" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input
                :placeholder="$t('卖家名称')"
                clearable
                @keyup.enter.native="getList"
                v-model="queryParams.distrName"
              />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions> </template>
    </PageSearch>
    <el-table :height="calTableHeight()" v-loading="loading" ref="TableRef" :data="tableData" row-key="menuId">
      <!-- 租户id 租户类型 卖家名称 积分 冻结积分 操作 -->
      <el-table-column align="center" show-overflow-tooltip prop="distrId" :label="$t('租户id')" width="200" />
      <el-table-column align="center" show-overflow-tooltip prop="type" :label="$t('租户类型')">
        <template slot-scope="{ row }">
          <span v-if="row.type == 1" style="color: blueviolet">{{ $t('卖家') }}</span>
          <span v-if="row.type == 2" style="color: green">{{ $t('供应商') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="distrName" :label="$t('卖家名称')" />
      <el-table-column align="center" show-overflow-tooltip prop="balance" :label="$t('积分')" />
      <el-table-column align="center" show-overflow-tooltip prop="frozenBalance" :label="$t('冻结积分')" />

      <el-table-column align="center" show-overflow-tooltip prop="payAmount" :label="$t('操作')">
        <template slot-scope="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <span class="el-dropdown-link">
              {{ $t('更多') }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- v-hasPermi="['distribution:orderMercari:syncData']" -->
              <el-dropdown-item v-hasPermi="['distributor:distributorPoints:list']" command="PointRecord">
                {{ $t('积分变动记录') }}
              </el-dropdown-item>
              <el-dropdown-item
                v-hasPermi="['distribution:distributorPointsFrozenRecords:list']"
                command="FrozenPointRecord"
              >
                {{ $t('冻结积分记录') }}
              </el-dropdown-item>
              <!-- 如果类型是供应商，屏蔽这个充值入口 -->
              <el-dropdown-item
                v-hasPermi="['system:payCashierConfig:list:platformPoints']"
                command="admin"
                v-show="row.type != 2"
              >
                {{ $t('积分手动充值入口admin') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <Recharge
      :type="recharge.type"
      @getList="getList"
      :show.sync="recharge.show"
      :title="recharge.title"
      :formData="recharge.formData"
    />

    <FrozenPointRecord
      :type="frozenPointRecord.type"
      @getList="getList"
      :show.sync="frozenPointRecord.show"
      :title="frozenPointRecord.title"
      :formData="frozenPointRecord.formData"
    />

    <PointRecord
      :type="pointRecord.type"
      @getList="getList"
      :show.sync="pointRecord.show"
      :title="pointRecord.title"
      :formData="pointRecord.formData"
    />
  </div>
</template>

<script>
import { getDistributorProportionListPage } from '@/api/bill/platDistributerPoint'
import Recharge from './components/recharge.vue'
import FrozenPointRecord from './components/frozenPointRecord.vue'
import PointRecord from './components/pointRecord.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'Platform',
  components: {
    Recharge,
    FrozenPointRecord,
    PointRecord,
  },
  data() {
    return {
      distrId: JSON.parse(localStorage.getItem('distr') || '{}').distrId,

      showSearch: false,
      /**导出 */
      exportInfo: {},

      /**详情信息 */
      recharge: {
        /**显示详情 */
        show: false,
        type: '',
        title: '',
        formData: {},
      },
      /**冻结积分记录 */
      frozenPointRecord: {
        /**显示详情 */
        show: false,
        type: '',
        title: '',
        formData: {},
      },
      /**积分变动记录 */
      pointRecord: {
        /**显示详情 */
        show: false,
        type: '',
        title: '',
        formData: {},
      },

      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        time: [],
        pageNum: 1,
        pageSize: 20,
        type: 1,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleCommand(command, row) {
      console.log(`command ==>`, command)
      switch (command) {
        case 'PointRecord':
          this.pointRecord.formData = row
          this.pointRecord.title = this.$t('积分变动记录')
          this.pointRecord.show = true
          break
        case 'FrozenPointRecord':
          this.frozenPointRecord.formData = row
          this.frozenPointRecord.title = this.$t('冻结积分记录')
          this.frozenPointRecord.show = true
          break
        case 'admin':
          this.recharge.formData = row
          this.recharge.title = this.$t('详情')
          this.recharge.show = true
          break

        default:
          break
      }
    },

    handleExport() {
      if (this.queryParams.time.length == 0) {
        return this.$message({ type: 'error', message: this.$t('请选择时间范围') })
      }
      const data = {
        startTime: this.queryParams.time[0],
        endTime: this.queryParams.time[1],
      }
      this.download(
        'distribution/billPlatform/export',
        {
          ...this.queryParams,
          ...data,
        },
        `platformBalance_${new Date().getTime()}.xlsx`,
      )
    },
    handleType(type) {
      const index = this.bill_type_platform_list.findIndex((i) => i.dictValue == type)
      return this.bill_type_platform_list[index]?.dictLabel
    },

    /** 查询菜单列表 */
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
        distrId: this.distrId,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      getDistributorProportionListPage(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 20
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 20
      this.getList()
    },
  },
}
</script>
<style lang="scss"></style>
